<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			.top_cintext{
				height: 200px;
				width: 100%;
				background-color: #e0e0e0;
				text-align: center;
				line-height: 200px;
			}
			/* 吸顶灯内容元素初始效果 */
			.sticky_element{
				height: 50px;
				background-color: #333;
				color: #fff;
				text-align: center;
				line-height: 50px;
			}
			/* 页面主题区域 */
			.main_context{
				height: 8000px;
				background-color: #e0e0e0;
			}
			/* 切换样式：吸顶灯卡页面顶部 */
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
/* 			ready()事件源语法：$(document).ready(function(){});
			             简写：$(function(){})
			总结：页面元素全部加载完毕，在执行JQ相关操作
			script元素放在最后一个body位置【可不写】*/
			
	$(function(){
				
		//  固定值：页面顶部到吸顶灯位置--BOM语法
		//  offset()   获取或者设置元素相对于文档偏移量
		//  offset().top  从顶部到吸顶灯元素偏移量
		var se=$(".sticky_element").offset().top;
		
		//滚动值：BOM对象+事件源
		//$(window) 抓取页面window对象，监听窗口事件：窗口改变、滚动
		// 理解：抓取页面的滚动值
		$(window).scroll(function(){
		//滚动值：获取页面滚动位置
		//scrollTop()获取页面滚动垂直距离
		var st=$(window).scrollTop();
		
		//判断  固定值大于滚动值，滚动超过200，实现切换：吸顶效果
		if(se<st){
			//条件成立：大于200px  切换吸顶效果
			$(".sticky_element").addClass("sticky");
		}else{
			//条件不成立：小于200px
			$(".sticky_element").removeClass("sticky");
		}
	});
	});
		</script>
	</head>
	<body>
		<!-- 顶部内容：导航 -->
		<div class="top_cintext">顶部内容区域</div>
		<!-- 吸顶灯内容 -->
		<div class="sticky_element">我是吸顶元素</div>
		<!-- 页面主题内容 -->
		<div class="main_context">
			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut dolores
			 inventore alias odio unde ratione mollitia est nihil molestiae atque adipisci officiis 
			 provident iure enim commodi molestias, non quasi nulla. Lorem ipsum dolor sit amet consectetur adipisicing 
			 elit. Sint ipsum, aperiam quae debitis repellat saepe tempore veritatis vel illo. Molestiae voluptate, corporis 
			 nobis veniam eum voluptatibus mollitia quos perspiciatis vero! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est,
			  incidunt! Ullam a, hic nisi quasi dolore voluptatem blanditiis corrupti, nesciunt vitae, doloremque quibusdam esse quam! Accusantium
			   deleniti qui vel labore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime sint molestiae quisquam deleniti quos. Iusto iste
				labore pariatur aut animi quas sed libero aspernatur mollitia quasi. Magnam sed provident rem! Lorem ipsum dolor sit amet consectetur 
				adipisicing elit. Cumque animi officiis rerum, magnam ab obcaecati pariatur ea expedita ipsam dolores enim veritatis, deserunt illo 
				eaque ratione cupiditate commodi? Quo, veritatis.
		</div>	
	</body>
</html>
<!-- 吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
	思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
	     2.页面的顶部到吸顶灯位置：200px，大于200px
	     3.追加第一个样式：固定定位，页面的顶部位置
			
	     1.追加样式：吸顶灯卡在页面顶部
	     2.固定值：页面顶部到吸顶灯位置
		 3.固定值<滚动值，滚动范围超出200px 实现切换
-->